<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>数据统计</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col> 
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                   <div class="time">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" :prefix-icon="Calendar" style="width: 320px" />
                    </div>
                    <el-button type="primary">搜索</el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="numberWithdrawalRequests" label="申请体现条数"></el-table-column>
                    <el-table-column label="待审核条数">
                        <template #default='scope'>
                             <el-button plain @click="open"><el-icon><Download /></el-icon>{{ scope.row.itemsPendingReview }}</el-button>
                        </template>     
                    </el-table-column>
                    <el-table-column prop="numberWithdrawalsWechat" label="已提现到微信条数"></el-table-column>
                    <el-table-column prop="numberWithdrawalsBankcard" label="已提现到银行卡条数"></el-table-column>
                    <el-table-column prop="totalAmountRejected" label="已拒绝条数"></el-table-column>
                    <el-table-column prop="totalApplicationAmount" label="申请总金额"></el-table-column>
                    <el-table-column prop="totalAmountPendingReview" label="待审核总金额"></el-table-column>
                    <el-table-column prop="totalAmountWithdrawnWechat" label="已提现到微信总金额"></el-table-column>
                    <el-table-column prop="totalAmountWithdrawnBankcard" label="已提现到银行卡总金额"></el-table-column>
                    <el-table-column prop="totalAmountRejected" label="已拒绝总金额"></el-table-column>
                </el-table>
                 <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { getchiyouList } from '@/components/Finance/DeviceStatisics'
import { ElMessage, ElMessageBox } from 'element-plus'
// 修正：所有图标都从 @element-plus/icons-vue 导入
import { Fold, Refresh, Download, Calendar } from '@element-plus/icons-vue'

// 表格数据
const tableData = ref([])
let getlist = async () => {
  try {
    let res = await getchiyouList({})
    console.log(res);
    // 防止接口返回异常导致的错误
    tableData.value = res?.dataset?.list || []
    //res.dataset.
  } catch (error) {
    console.error('获取数据失败:', error)
    tableData.value = []
  }
}
getlist()

// 日期范围选择器数据
const dateRange = ref([])

// 分页相关数据和方法
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const size = ref('default')
const disabled = ref(false)
const background = ref(true)

// 每页条数改变
const handleSizeChange = (val) => {
  pageSize4.value = val
  console.log(`每页 ${val} 条`);
  // 可选：重新获取数据
  // getlist()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage4.value = val
  console.log(`当前页: ${val}`);
  // 可选：重新获取数据
  // getlist()
}

// 待审核条数导出方法
const open = () => {
  ElMessageBox.confirm(
    `确定要导出符合筛选条件的数据吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info' // 添加类型，避免警告
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '成功导出',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消导出', // 修正提示文本，取消不是失败
      })
    })
}

// 刷新页面函数
const handleRefresh = () => {
  // 优化：不刷新整个页面，只重新获取数据
  getlist()
  ElMessage({
    type: 'success',
    message: '刷新成功'
  })
}
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}
.user-info{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*设备转让*/
.transfer{
    background-color: rgb(223, 120, 37);
    border-color: rgb(223, 120, 37);
}
/*内容部分*/
.el-main{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}
/*搜索部分*/
.search{
    width: 100%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
/*添加/刷新部分*/
.refresh{
    width: 100%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*表格部分*/
:deep(.el-table) {
    width: 100% !important;
    margin-bottom: 20px;
    
    .el-table__header-wrapper,
    .el-table__body-wrapper {
        width: 100% !important;
    }
    
    .el-table__header {
        width: 100% !important;
    }
    
    .el-table__body {
        width: 100% !important;
    }
    
    .el-table__row {
        height: 80px !important;
    }
    
    .el-table__header th,
    .el-table__body td {
        text-align: center;
        font-size: 13px;
    }
}
/*分页器*/
.demo-pagination-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}

/* 适配小屏幕 */
@media (max-width: 1200px) {
    .search {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}
</style>